<template>
  <div>
    <layout title="配置图片" :footer="false" description="大图 横版 1140*640，竖版 640*1140">
      <a-upload
        list-type="picture-card"
        :file-list="fileList"
        :beforeUpload="beforeUpload"
        multiple
        @change="handleChange"
        @preview="handlePreview"
      >
        <div v-if="fileList.length <= limit">
          <a-icon type="plus" />
          <div class="ant-upload-text"> 上传 </div>
        </div>
      </a-upload>
    </layout>
    <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
import layout from '../layout'

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

function dataURItoBlob(base64Data) {
    // 转Blob流
    // console.log(base64Data);//data:image/png;base64,
    var byteString;
    if(base64Data.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(base64Data.split(',')[1]);//base64 解码
    else{
        byteString = unescape(base64Data.split(',')[1]);
    }
    var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];//mime类型 -- image/png

    var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
    var ia = new Uint8Array(arrayBuffer);//创建视图
    // var ia = new Uint8Array(byteString.length);//创建视图
    for(var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    var blob = new Blob([ia], {
      type: mimeString,
    });
    return blob;
}

export default {
  data() {
    return {
      limit: 99999,
      fileList:[],
      previewImage:'',
      previewVisible:false,
      list:[]
    }
  },
  methods:{
    async beforeUpload(file){
      // console.log(file)
      if(!(file.type === 'image/jpeg' || file.type === 'image/png')){
        this.$message.error('只能上传JPG/PNG文件')
        return Promise.reject()
      }
      let filePreview = await getBase64(file);
      let imgBlob = dataURItoBlob(filePreview)
      // console.log(dataURItoBlob(filePreview))
      this.fileList.push({
        uid: file.uid,
        name: file.name,
        url:filePreview,
        file:{name: file.name, blob:imgBlob}
      })
      this.list.push({name: file.name, blob:imgBlob})
      this.$emit('update:form', this.list)
      return Promise.reject()
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }){
      this.fileList = fileList
      this.list = fileList.map(e=>e.file)
      console.log(this.list)
      this.$emit('update:form', this.list)
    },
  },
  components:{layout},
}
</script>

<style lang="less" scoped>

</style>